<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 父组件模板 -->
<div id="app">
    <cpn v-bind:ccategories="categories" @item-click="cpnClick"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn">
    <div>
        <button v-for="item in ccategories" @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 子组件
    const cpn = {
        template:'#cpn',
        props:['ccategories'],
        methods:{
            btnClick(item){
                //console.log(item)
                // 发射事件
                this.$emit('item-click',item)
            }
        }
    }

    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            categories:[{id:'aaa',name:'手机数码'},
                {id:'bbb',name:'家用家电'},
                {id:'ccc',name:'电脑办公'}]
        },
        methods:{
          cpnClick(item){
            console.log(item)
          }
        },
        components:{
            cpn
        }
    })

</script>
</body>
</html>